<template>
	<view class="list">
		<view class="item" v-for="val in data" :key="val.id">
			<view class="addr">
				<image src="../static/91.png" mode=""></image>
				<text>09:00-12:00</text>
			</view>
			
			<view class="addr">
				<image src="../static/92.png" mode=""></image>
				<text>洪山区</text>
			</view>
			
			<view class="pro">
				<image :src="val.pic" mode=""></image>
			</view>
			
			<view class="info">
				<view class="left">
					<text>盛夏海鲜餐宴</text>
					<view ><text>￥4999/</text>桌</view>
				</view>
				
				<view class="right">
					<view class="tel" @click="callPhone(val.name,val.tel)">
						<image src="../static/93.png"></image>
						<text>电话</text>
					</view>
					<view class="service">
						<image src="../static/icon_msg.png" mode=""></image>
						<text>服务</text>
					</view>
				</view>
				
			</view>
		
			<view class="btn">我的账单</view>
		</view>
		
		<!-- 确认框 -->
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog 
				mode="base" 
				:title="title" 
				:content="mobile"
				:duration="1000" 
				:before-close="true" 
				@close="close" 
				@confirm="confirm">
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	export default{
		name:"OrderList",
		props:{
			data:{
				type:Array
			}
		},
		data:function(){
			return {
				title:"张三",
				mobile:"15527069211"
			}
		},
		methods:{
			callPhone(title,tel){
				//设置电话
				this.title = title,
				this.mobile = tel;
				this.$refs.popup.open()//显示对话框
			},
			close(){
				console.log("不想打电话了")
				this.$refs.popup.close()//关闭对话框
			},
			confirm(){
				console.log("确定-拨打")
				uni.makePhoneCall({
					phoneNumber:'15527069211'
				}).then((res)=>{
					console.log(res)
				})
				this.$refs.popup.close()//关闭对话框
			}
		}
	}
</script>

<style lang="less">
.list{
	.item{
		box-shadow: 0 0 20rpx #cccccc;
		margin-bottom: 36rpx;
		border-radius: 10rpx;
		padding-bottom: 20rpx;
		
		.addr{
			display: flex;
			align-items: center;
			padding: 10rpx;
			font-size: 30rpx;
			image{
				width: 38rpx;
				height: 38rpx;
				padding-right: 10rpx;
			}
		}
		.pro{
			image{
				height: 510rx;
				width: 100%;
			}
		}
		.info{
			padding: 10rpx;
			display: flex;
			justify-content: space-between;
			
			.left{
				view{
					text{
						color:#f17367
					}
				}
			}
			.right{
				display: flex;
				image{
					width: 44rpx;
					height: 44rpx;
				}
				.tel{
					display: flex;
					flex-direction: column;
					margin-right: 10rpx;
					font-size: 26rpx;
				}
				.service{
					display: flex;
					flex-direction: column;
					font-size: 26rpx;
				}
			}
		}
	     
		.btn{
			margin: 15rpx;
			padding:20rpx 0;
			color:#ffffff;
			background:#ff6855;
			text-align: center;
			border-radius: 15rpx;
		}
	}
}
</style>